import React, {Component} from 'react';
import './01-index.css'

class App extends Component {

    ref = React.createRef()

    state = {
        list: ['1', '2'],
    }

    render() {
        return (
            <div>
                <input ref={this.ref}/>
                <button onClick={() => {
                    this.getAdd(this.ref)
                }}>添加
                </button>
                <br/>
                <div>
                    <ul>
                        {
                            this.state.list.map((item, index) =>
                                <li key={index}>
                                    {/*富文本展示*/}
                                    <span style={{
                                        marginRight: '60px'
                                    }} dangerouslySetInnerHTML={
                                        {
                                            __html:item
                                        }
                                    }></span>

                                    {/*<span style={{
                                        marginRight: '60px'
                                    }}>{item}</span>*/}


                                    <button onClick={() => {
                                        this.getDelete(item, index)
                                    }}>删除
                                    </button>
                                </li>
                            )
                        }
                    </ul>

                    {/*{*/}
                    {/*    //方案一*/}
                    {/*    this.state.list.length ===0 ? <div>暂无数据!</div>:null*/}
                    {/*}*/}

                    {/*{*/}
                    {/*    //方案二*/}
                    {/*    this.state.list.length ===0 &&<div>暂无数据!</div>*/}
                    {/*}*/}

                    {
                        //方案三
                        <div className={this.state.list.length === 0 ?'':'hiddent'}>暂无数据!</div>
                    }


                </div>
            </div>
        );
    }

    //添加
    getAdd(ref) {
        console.log(ref)
        //方法一
        let newlist = []
        newlist.push(ref.current.value)

        //方法二,不提倡,不要直接修改状态,可能会有问题
        // this.state.list.push(ref.current.value)

        this.setState(
            {
                //一
                list: [...this.state.list, ...newlist]

                //二
                // list:this.state.list

            }
        )
        //清空输入框
        this.ref.current.value = ''
    }

    //删除
    getDelete(item, index) {
        let arr = [...this.state.list]
        arr.splice(index, 1)
        this.setState(
            {
                list: arr
            }
        )

    }
}

export default App;